<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>条件渲染</h1>
        <p>
            条件渲染: <br>
                1.V-if<br>
                    写法:<br>
                    (1).v-if="表达式"<br>
                    (2).V-else-if="表达式"<br>
                    (3).v-else="表达式"<br>
                    <br><br>
                    适用于:切换频率较低的场景。<br>
                    特点:  不展小的DOM元素直接被移除。<br>
                    注意:  v-if可以和;v-else-if、v-else一起使用，但要求结构不能被“打断”
                    <br>
                2.v-show<br>
                    写法:v-show="表达式"<br>

                    适用于:切换频率较高的场景。<br>
                    特点:不展小的DOM元素未被移除，仅仅是使用样式隐藏掉<br>
                    <br><br>
                3,备注:使川v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

        </p>

        <h1>v-show</h1>
        <h1 v-show="is_show">{{ msg }}</h1>
        <button @click="show">v-show 点击切换显示隐藏</button>

        <hr>

        <h1>v-if</h1>
        <!-- v-if...v-else-if...v-else...   指令中间不能穿插其他的标签 构造 穿插后面的指令不会生效   -->
        <h1 v-if="is_show">{{ msg }}</h1>
        <h1 v-else-if="is_show===1">{{msg}}</h1>
        <h1 v-else>{{msg}}</h1>

        <button @click="show">v-if 点击切换显示隐藏</button>

        <!-- v-if  和 template 结合使用 -->
        <template v-if="is_show">
            <h1>{{ msg }}</h1>
            <h2>{{ msg }}</h2>
        </template>



    </div>
</body>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'hello world 这是要显示的内容',
                is_show: true
            },
            methods: {
                show() {
                    this.is_show =!this.is_show;
                }
            },
        })
    </script>
</html>